<script setup lang="ts">
defineOptions({
  name: "gasCylinderReplaceTasks"
});

import { ref, onMounted } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import { queryPlatformOverview, queryGasCylinderTaskStat } from "@/api/modules/operation";
import { useLabelLayoutBarChartFn, useGetBarChartsAgOptions } from "@/hooks/useEcharts";

const platformOverviewQueryData = ref<any>(null);

// 气瓶更换今日任务
const gasCylinderReplaceTasksRef = ref<InstanceType<typeof echartsChart> | null>(null);
const gasCylinderReplaceTasksOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const gasCylinderReplaceTasksTitle = ref<string>("气瓶更换今日任务");
const gasCylinderReplaceTasksInit = async () => {
  if (!platformOverviewQueryData.value?.length) return gasCylinderReplaceTasksRef.value.loadingInstance.close();
  const ec = await gasCylinderReplaceTasksRef.value.getEcharts();
  const xAxisData = platformOverviewQueryData.value?.slice(1).map(item => item.name);
  const data = platformOverviewQueryData.value?.slice(1).map(item => item.num);
  const colorList = ["#3B82F6", "#FABF2B", "#35CECB", "#FF5639", "#FA8400", "#9755E5", "#355592"];
  const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList, 22);
  gasCylinderReplaceTasksOptions.value = useLabelLayoutBarChartFn(
    ec,
    xAxisData,
    data,
    gasCylinderReplaceTasksTitle.value,
    "",
    colorList,
    false,
    "",
    ag
  );
  gasCylinderReplaceTasksRef.value.loadingInstance.close();
};
// 获取数据  气瓶状态统计 + 气瓶更换今日任务 + 酸桶状态统计 + 酸桶更换今日任务 + 侦测器状态统计 + 侦测器隔离今日任务 + 纯水品质 + 大宗气体流量统计 + 槽车填充今日任务 + 质量指标
const queryPlatformOverviewFn = async () => {
  const res = await queryGasCylinderTaskStat(null, () => {
    gasCylinderReplaceTasksRef.value.loadingInstance.close();
  });
  if (!res) return;
  platformOverviewQueryData.value = res;
};

const initLoading = () => {
  gasCylinderReplaceTasksRef.value.initLoading();
};

onMounted(async () => {
  initLoading();
  // 获取数据  气瓶状态统计 + 气瓶更换今日任务 + 酸桶状态统计 + 酸桶更换今日任务 + 侦测器状态统计 + 侦测器隔离今日任务 + 纯水品质 + 大宗气体流量统计 + 槽车填充今日任务 + 质量指标
  queryPlatformOverviewFn().then(() => {
    gasCylinderReplaceTasksInit();
  });
});
</script>

<template>
  <div class="gas-overview-item">
    <echartsChart ref="gasCylinderReplaceTasksRef" :title="gasCylinderReplaceTasksTitle" :options="gasCylinderReplaceTasksOptions" />
  </div>
</template>

<style lang="scss" scoped>
.gas-overview-item {
  width: 100%;
  height: 100%;
}
</style>
